<template>
	<div class="mainRight">
		<el-tabs
			v-model="queryParams.userororg"
			type="card"
			@tab-click="handleClick"
		>
			<el-tab-pane
				:label="item.label"
				:name="item.name"
				v-for="(item, index) in tabsList"
				:key="index"
			>
				<template v-if="index == 0">
					<div class="partyRewardsPenalties">
						<div class="body-layout">
							<div class="honor-layout">
								<div class="honor-layout-cont">
									<div class="title-head-search">
										<!-- <el-form ref="form" :model="ruleForm" label-width="80px">
                      <el-form-item label="活动名称">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="活动名称">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    </el-form> -->
										<!-- <el-select v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                    <el-select v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select> -->
									</div>
								</div>
								<div class="title-content">
									<div class="title-head">
										<img
											src="../../../assets/images/icon7.png"
											style="width: 120px"
											alt=""
										/>
										<el-button plain>查看全部</el-button>
									</div>
									<el-carousel
										height="230px"
										arrow="never"
										indicator-position="outside"
										:autoplay="false"
									>
										<el-carousel-item
											v-for="(
												item, index
											) in tissueHonorList"
											:key="index"
										>
											<el-row>
												<el-col
													v-for="(em, ind) in item"
													:key="ind"
													:span="6"
													><div class="item-layout">
														<div
															class="item-image-div"
														>
															<img
																:src="
																	em.imageUrl
																"
																alt=""
															/>
														</div>
														<div
															class="item-honor-name"
														>
															{{ em.name }}
														</div>
														<div
															class="item-honor-group"
														>
															{{ em.honorname }}
														</div>
														<div
															class="item-honor-time"
														>
															{{ em.createtime }}
														</div>
													</div></el-col
												>
											</el-row>
										</el-carousel-item>
									</el-carousel>
									<div class="title-head">
										<img
											src="../../../assets/images/icon8.png"
											style="width: 120px"
											alt=""
										/>
										<el-button plain>查看全部</el-button>
									</div>
									<el-carousel
										height="230px"
										arrow="never"
										indicator-position="outside"
										:autoplay="false"
									>
										<el-carousel-item
											v-for="(
												item, index
											) in personageHonorList"
											:key="index"
										>
											<el-row>
												<el-col
													v-for="(em, ind) in item"
													:key="ind"
													:span="6"
													><div class="item-layout">
														<div
															class="item-image-div"
														>
															<img
																:src="
																	em.imageUrl
																"
																alt=""
															/>
														</div>
														<div
															class="item-honor-name"
														>
															{{ em.name }}
														</div>
														<div
															class="item-honor-group"
														>
															{{ em.honorname }}
														</div>
														<div
															class="item-honor-time"
														>
															{{ em.createtime }}
														</div>
													</div></el-col
												>
											</el-row>
										</el-carousel-item>
									</el-carousel>
								</div>
							</div>
						</div>
					</div>
				</template>
			</el-tab-pane>
		</el-tabs>

		<div v-if="queryParams.userororg != '2'">
			<el-form label-width="100px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="所属党组织">
							<!-- <el-cascader
								:options="[]"
								:props="{ checkStrictly: true }"
								clearable
								style="width: 100%"
							></el-cascader> -->
							<treeselect
								v-model="queryParams.userid"
								:options="deptOptions"
								:show-count="true"
								:normalizer="normalizer"
								placeholder="请选择所属组织"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="奖惩类别">
							<el-select placeholder="请选择" style="width: 100%">
								<el-option></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="奖惩类型">
							<el-select placeholder="请选择" style="width: 100%">
								<el-option></el-option>
							</el-select> </el-form-item
					></el-col>
				</el-row>
				<el-row>
					<el-col :span="8"
						><el-form-item label="奖惩类型">
							<el-date-picker
								type="year"
								placeholder="请选择年份"
								style="width: 100%"
							></el-date-picker> </el-form-item
					></el-col>
					<el-col :span="8" v-show="queryParams.userororg == '1'">
						<el-form-item label="党员姓名">
							<el-input
								placeholder="请输入姓名"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="tableListOperator">
				<div class="leftBtns">
					<el-button
						@click=";(title = '新增奖惩'), (dialogVisible = true)"
						size="small"
						icon="el-icon-plus"
						type="primary"
						>新建</el-button
					>
					<el-button size="small" plain icon="el-icon-download"
						>导出</el-button
					>
				</div>
				<div class="rightBtns">
					<el-button size="small" plain>查询</el-button>
					<el-button size="mini" type="primary">重置</el-button>
				</div>
			</div>
			<el-table :data="list" style="width: 100%" v-loading="loading">
				<el-table-column prop="orgname" label="所属组织" align="center">
				</el-table-column>
				<el-table-column
					v-if="queryParams.userororg == '1'"
					prop="name"
					label="姓名"
					align="center"
				>
				</el-table-column>
				<el-table-column label="奖惩类别" align="center">
					<template slot-scope="{ row }">
						{{
							ruleForm.userororg == 1
								? ruleForm.honorclass == 1
									? '个人荣誉'
									: '个人惩处'
								: ruleForm.honorclass == 1
								? '组织荣誉'
								: '组织惩处'
						}}
					</template>
				</el-table-column>
				<el-table-column label="奖惩类型" align="center">
					<template slot-scope="{ row }">
						{{
							getName(
								row.honortype,
								ruleForm.userororg == 1
									? row.honorclass == 1
										? personageHonorTypeList
										: personagePenalizeTypeList
									: row.honorclass == 1
									? tissueHonorTypeList
									: tissuePenalizeTypeList
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="honorname"
					label="奖惩名称"
					align="center"
				>
				</el-table-column>
				<el-table-column
					prop="createtime"
					label="获得时间"
					align="center"
				>
				</el-table-column>
				<el-table-column prop="title" label="操作" align="center">
					<template slot-scope="{ row }">
						<div
							style="
								display: flex;
								align-items: center;
								justify-content: center;
							"
						>
							<el-button type="text" @click="handleItem(1, row)"
								>查看</el-button
							>
							<el-divider direction="vertical"></el-divider>
							<el-button type="text" @click="handleItem(2, row)"
								>修改</el-button
							>
							<el-divider direction="vertical"></el-divider>
							<el-button type="text" @click="handleItem(3, row)"
								>删除</el-button
							>
						</div>
					</template>
				</el-table-column>
			</el-table>
    <pagination
      v-show="queryParams.total>0"
      :total="queryParams.total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="()=>{}"
    />
		</div>
		<el-dialog
			:title="title"
			:visible.sync="dialogVisible"
			width="40%"
			@close="cancelForm"
		>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="100px"
				class="ruleForm"
			>
				<el-form-item
					:label="`${
						queryParams.userororg == 1 ? '奖惩人员' : '所属组织'
					}`"
					prop="userid"
				>
					<div>
						<el-select
							v-if="ruleForm.userororg == 1"
							@change="changeName"
							v-model="ruleForm.userid"
							filterable
							placeholder="请选择人员"
						>
							<el-option
								v-for="item in userList"
								:key="item.id"
								:label="item.username"
								:value="item.id"
							>
							</el-option>
						</el-select>
						<treeselect
							v-else
							v-model="ruleForm.userid"
							:options="deptOptions"
							:show-count="true"
							:normalizer="normalizer"
							placeholder="请选择所属组织"
						/>
					</div>
					<el-radio
						@input="changeUserororg"
						v-model="ruleForm.honorclass"
						:label="1"
						>{{
							queryParams.userororg == 1 ? '个人' : '组织'
						}}荣誉</el-radio
					>
					<el-radio
						@input="changeUserororg"
						v-model="ruleForm.honorclass"
						:label="2"
						>{{
							queryParams.userororg == 1 ? '个人' : '组织'
						}}惩处</el-radio
					>
				</el-form-item>
				<el-row>
					<el-col :span="12"
						><el-form-item label="奖惩类型" prop="honortype">
							<el-select
								@change="changeHonorType"
								v-model="ruleForm.honortype"
								placeholder="请选择"
							>
								<el-option
									v-for="item in rewardsTypeList"
									:key="item.id"
									:label="item.configname"
									:value="item.id"
								>
								</el-option>
							</el-select> </el-form-item
					></el-col>
					<el-col :span="12"
						><el-form-item label="日期" prop="createtime">
							<el-date-picker
								v-model="ruleForm.createtime"
								type="date"
								placeholder="请选择日期"
								value-format="yyyy-MM-dd"
							>
							</el-date-picker> </el-form-item
					></el-col>
				</el-row>

				<el-form-item label="奖惩名称" prop="honorname">
					<el-input
						v-model="ruleForm.honorname"
						placeholder="请输入奖惩名称"
					></el-input>
				</el-form-item>
				<el-form-item label="奖惩说明" prop="honorcontent">
					<el-input
						type="textarea"
						:rows="2"
						v-model="ruleForm.honorcontent"
						placeholder="请输入奖惩说明"
					></el-input>
				</el-form-item>
				<el-form-item
					label="照片"
					:prop="`${ruleForm.honorclass == 1 ? 'pictureurl' : ''}`"
				>
					<el-upload
						ref="uploadImage"
						class="avatar-uploader"
						action
						:auto-upload="false"
						list-type="picture-card"
						:limit="1"
						accept=".jpg,.png,.jpeg"
						:show-file-list="false"
						:on-change="(e) => handleChangeUpload(e, 'pictureurl')"
					>
						<img
							v-if="ruleForm.imageUrl"
							:src="ruleForm.imageUrl"
							class="avatar"
						/>
						<div v-else style="font-size: 14px">
							<i
								class="el-icon-plus avatar-uploader-icon"
								style="font-size: 20px"
							></i>
							<div>上传图片</div>
						</div>
						<div slot="tip" class="el-upload__tip">
							只支持.jpg.png.jpeg格式 大小200M以内
						</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="附件" prop="fileurl">
					<el-upload
						ref="uploadFile"
						class="upload-demo"
						action
						accept=".doc,.docx,.pdf"
						:auto-upload="false"
						:on-change="(e) => handleChangeUpload(e, 'fileurl')"
						:limit="1"
					>
						<el-button size="small" plain>上传附件</el-button>
						<div slot="tip" class="el-upload__tip">
							支持扩展名：.doc .docx .pdf 大小200M以内
						</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelForm">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')"
					>确 定</el-button
				>
			</span>
		</el-dialog>
		<el-dialog
			title="荣誉详情"
			:visible.sync="honorDialogVisible"
			width="30%"
		>
			<el-form
				ref="honorDetails"
				class="honorDetails"
				:model="honorDetails"
				label-width="80px"
			>
				<el-form-item label="组织名称:">
					<div>{{ honorDetails.name }}</div>
				</el-form-item>
				<el-form-item label="荣誉名称:">
					<div>{{ honorDetails.honorname }}</div>
				</el-form-item>
				<el-row>
					<el-col :span="12"
						><el-form-item label="奖惩类别:">
							<div>
								{{
									honorDetails.userororg == 1
										? honorDetails.honorclass == 1
											? '个人荣誉'
											: '个人惩处'
										: honorDetails.honorclass == 1
										? '组织荣誉'
										: '组织惩处'
								}}
							</div>
						</el-form-item></el-col
					>
					<el-col :span="12"
						><el-form-item label="获奖类型:">
							<div>
								{{
									getName(
										honorDetails.honortype,
										ruleForm.userororg == 1
											? honorDetails.honorclass == 1
												? personageHonorTypeList
												: personagePenalizeTypeList
											: honorDetails.honorclass == 1
											? tissueHonorTypeList
											: tissuePenalizeTypeList
									)
								}}
							</div>
						</el-form-item></el-col
					>
				</el-row>

				<el-form-item label="授予日期:">
					<div>{{ honorDetails.createtime }}</div>
				</el-form-item>
				<el-form-item label="荣誉说明:">
					<div>{{ honorDetails.honorcontent }}</div>
				</el-form-item>
				<el-form-item label="图片:">
					<div v-if="honorDetails.imageUrl">
						<a :href="honorDetails.imageUrl" target="_blank">
							<img
								style="
									border-radius: 4px;
									width: 160px;
									height: 100px;
									display: block;
									object-fit: cover;
								"
								:src="honorDetails.imageUrl"
								alt=""
							/>
						</a>
					</div>
				</el-form-item>
				<el-form-item label="附件:">
					<div></div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="honorDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="honorDialogVisible = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { getConfigList, uploadfile } from '@/api/setting'
import { listUser } from '@/api/system/users'
import { parentlist } from '@/api/tissue'
import { getHonorList, editHonor, addHonor, deleteHonor } from '@/api/party'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
	components: { Treeselect },
	data() {
		return {
			title: '',
			loading: true,
			activeName: '2',
			dialogVisible: false,
			honorDialogVisible: false,
			honorDetails: {}, //荣誉详情
			tabsList: [
				{
					name: '2',
					label: '荣誉墙',
				},
				{
					name: '0',
					label: '组织奖惩管理',
				},
				{
					name: '1',
					label: '个人奖惩管理',
				},
			],
			list: [], //
			queryParams: {
				total: 0,
				pageNum: 1,
				pageSize: 10,
				// honorclass:1,
				userororg: '2', //
			},
			ruleForm: {
				id: null,
				name: '中共兴平市党委',
				honorname: '',
				honorclass: 1, //1奖励2惩罚
				honortype: '',
				createtime: '',
				honorcontent: '',
				pictureurl: '',
				imageUrl: '',
				fileurl: '',
				status: 1,
				userororg: 1, //0:组织 1：个人
				userid: undefined,
			},
			rules: {
				userid: [
					{
						required: true,
						validator: (rule, value, callback) => {
							if (!value) {
								//如果是上传组件value一直为null ，因此无法这样写自定义校验
								callback(
									`请选择${
										this.ruleForm.userororg == 0
											? '所属组织'
											: '奖惩人员'
									}`
								)
							} else {
								callback()
							}
						},
						trigger: 'blur',
					},
				],
				createtime: [
					{
						required: true,
						message: '请选择日期',
						trigger: 'change',
					},
				],
				honortype: [
					{
						required: true,
						message: '请选择奖惩类型',
						trigger: 'change',
					},
				],
				honorname: [
					{
						required: true,
						message: '请填写100字以内的奖惩名称',
						trigger: 'blur',
					},
					{
						max: 100,
						message: '请填写100字以内的奖惩名称',
						trigger: 'blur',
					},
				],
				pictureurl: [
					{
						required: true,
						message: '请上传荣誉图片',
						trigger: 'blur',
					},
				],
			},
			rewardsTypeList: [], //奖惩类型
			userList: [], //用户列表
			tissueHonorList: [], //组织荣誉列表
			personageHonorList: [], //个人荣誉列表
			personagePenalizeTypeList: [], //个人惩处类型列表
			tissuePenalizeTypeList: [], //组织惩处类型列表
			personageHonorTypeList: [], //个人荣誉类型列表
			tissueHonorTypeList: [], //组织荣誉类型列表
			deptOptions: undefined,
		}
	},
	methods: {
		normalizer(node) {
			//当子节点也就是children=[]时候去掉子节点
			if (node.childlist && !node.childlist.length) {
				delete node.childlist
			}
			return {
				id: node.id,
				label: node.name,
				children: node.childlist,
			}
		},
		handleItem(type, item) {
			if (type == 1) {
				this.honorDetails = item
				this.honorDialogVisible = true
			} else if (type == 2) {
				this.title = '更新奖惩'
				this.$nextTick(() => {
					let {
						id,
						name,
						honorname,
						honorclass,
						honortype,
						createtime,
						honorcontent,
						pictureurl,
						imageUrl,
						fileurl,
						status,
						userororg,
						userid,
					} = item
					this.ruleForm = {
						id,
						name,
						honorname,
						honorclass,
						honortype,
						createtime,
						honorcontent,
						pictureurl,
						imageUrl,
						fileurl,
						status,
						userororg,
						userid,
					}
				})
				this.dialogVisible = true
			} else {
				this.$confirm(
					`确定删除 ${item.honorname} 吗？`,
					'删除个人奖惩',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				)
					.then(() => {
						deleteHonor({ id: item.id }).then((res) => {
							this.loading = true
							this.$modal.msgSuccess(res.msg)
							this.getList()
						})
					})
					.catch(() => {})
			}
		},
		changeName(e) {
			this.userList.forEach((item) => {
				if (item.id == e) this.ruleForm.name = item.username
			})
		},
		handleChangeUpload(e, name) {
			let data = new FormData()
			data.append('file', e.raw)
			data.append('flag', 'uploadHonor')

			uploadfile(data).then((res) => {
				this.ruleForm[name] = res.msg
				if (name == 'pictureurl') this.ruleForm.imageUrl = e.url
			})
		},
		changeHonorType(e) {
			this.rewardsTypeList.forEach((item) => {
				if (e == item.id) this.ruleForm.honorname = item.configname
			})
		},
		cancelForm() {
			this.$refs.ruleForm.resetFields()
			this.$refs.uploadImage.clearFiles()
			this.$refs.uploadFile.clearFiles()
			this.ruleForm.imageUrl = ''
			this.dialogVisible = false
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let api = this.ruleForm.id
						? editHonor(this.ruleForm)
						: addHonor(this.ruleForm)
					api.then((res) => {
						this.loading = true
						this.cancelForm()
						this.$modal.msgSuccess(res.msg)

						this.getList()
					})
				} else {
					return false
				}
			})
		},
		resetForm(formName) {
			this.$refs[formName].resetFields()
		},
		handleSizeChange(val) {
			this.loading = true
			this.queryParams.pageSize = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.loading = true
			this.queryParams.pageNum = val
			this.getList()
		},
		//获取荣誉列表
		getList() {
			getHonorList(this.queryParams).then((res) => {
				res.data.list.forEach((item) => {
					item.imageUrl = item.pictureurl
						? process.env.VUE_APP_BASE_API + '/' + item.pictureurl
						: ''
				})
				this.loading = false
				this.list = res.data.list
				this.queryParams.total = res.data.total
			})
		},
		changeUserororg(e) {
			this.rewardsTypeList =
				e == 1
					? this.ruleForm.userororg == 1
						? this.personageHonorTypeList
						: this.tissueHonorTypeList
					: this.ruleForm.userororg == 1
					? this.personagePenalizeTypeList
					: this.tissuePenalizeTypeList
		},
		handleClick(e) {
			if (e.name == 2) {
				this.getHonorList()
			} else {
				if (e.name == 0) {
					this.rewardsTypeList =
						this.ruleForm.honorclass == 1
							? this.tissueHonorTypeList
							: this.tissuePenalizeTypeList
				} else {
					this.rewardsTypeList =
						this.ruleForm.honorclass == 1
							? this.personageHonorTypeList
							: this.personagePenalizeTypeList
				}
				this.queryParams.pageNum = 1
				this.getList()
				this.ruleForm.userororg = e.name
			}
		},
		getConfigList() {
			getConfigList({ configflag: 'jiangchengleixing' }).then((res) => {
				this.personageHonorTypeList = res.data
			})

			getConfigList({ configflag: 'gerenchengchu' }).then((res) => {
				this.personagePenalizeTypeList = res.data
			})

			getConfigList({ configflag: 'zuzhirongyu' }).then((res) => {
				this.tissueHonorTypeList = res.data
			})
			getConfigList({ configflag: 'zuzhichengchu' }).then((res) => {
				this.tissuePenalizeTypeList = res.data
			})

			listUser().then((res) => {
				this.userList = res.data
			})
			parentlist().then((response) => {
				this.deptOptions = response.data
			})
		},
		// 获取荣誉列表
		getHonorList() {
			getHonorList({
				userororg: 0,
				pageSize: 12,
				pageNum: 1,
				honorclass: 1,
			}).then((res) => {
				res.data.list.forEach((item) => {
					item.imageUrl = item.pictureurl
						? process.env.VUE_APP_BASE_API + '/' + item.pictureurl
						: ''
				})
				this.tissueHonorList = this.chunkArray(res.data.list, 4)
			})
			getHonorList({
				userororg: 1,
				pageSize: 12,
				pageNum: 1,
				honorclass: 1,
			}).then((res) => {
				res.data.list.forEach((item) => {
					item.imageUrl = item.pictureurl
						? process.env.VUE_APP_BASE_API + '/' + item.pictureurl
						: ''
				})
				this.personageHonorList = this.chunkArray(res.data.list, 4)
			})
		},
		chunkArray(array, chunkSize) {
			return Array.from(
				{ length: Math.ceil(array.length / chunkSize) },
				(_, index) =>
					array.slice(
						index * chunkSize,
						index * chunkSize + chunkSize
					)
			)
		},
	},
	created() {
		this.getConfigList()
		this.getHonorList()
	},
}
</script>
<style lang="scss" scoped>
.avatar {
	width: 86px;
	height: 86px;
	display: block;
	object-fit: cover;
}
::v-deep .el-upload--picture-card {
	width: 104px;
	height: 104px;
	padding: 8px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.honorDetails ::v-deep .el-form-item {
	margin-bottom: 0;
}
.partyRewardsPenalties {
	.body-layout {
		display: flex;
		justify-content: center;
		background: url('../../../assets/images/icon5.png') no-repeat;
		height: 780px;
		padding: 18px 68px 24px;
		background-size: 100% 100%;
		.honor-layout {
			display: flex;
			align-items: center;
			flex-flow: column;
			width: 100%;
		}
		.honor-layout-cont {
			width: 100%;
			height: 200px;
			align-items: center;
			background: no-repeat url('../../../assets/images/icon6.png');
			background-size: auto 100%;
			background-position: 50%;
			.title-head-search {
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
		.title-content {
			margin-top: 16px;
			padding: 22px 60px;
			width: 100%;
			height: 100%;
			border-radius: 7px;
			background-color: #fff;
			.title-head {
				width: 100%;
				display: flex;
				margin: 10px 0;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
}
.item-layout {
	padding: 10px 0;
	text-align: center;
	.item-image-div {
		display: inline-block;

		width: 180px;
		height: 120px;
		border: 1px solid #f1f1f1;
		img {
			width: 100%;
			height: 100%;
			border-radius: 4px;
		}
	}
	.item-honor-name {
		display: block;
		margin-top: 16px;
		color: #000;
		font-size: 16px;
		text-align: center;
		font-family: PingFangSC-Regular;
	}
	.item-honor-group {
		font-size: 12px;
		color: #000;
	}
	.item-honor-time {
		font-size: 12px;
		color: #999;
		line-height: 20px;
	}
}
</style>
